<template>
  <div id="root">
  <div class="todo-container">
  <div class="todo-wrap">
  <MyHeader @addTodo="addTodo"/>
  <MyList 
  :todos="todos" 
  />
  <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearDoneTodo="clearDoneTodo"/>
  </div>
  </div>
  </div>
</template>


<script>
    import MyHeader from './components/MyHeader'
    import MyList from './components/MyList'
    import MyFooter from './components/MyFooter'
    import pubsub from 'pubsub-js'
    export default {
        name: 'App',
        components:{
        MyHeader,
        MyList,
        MyFooter
        },
        data(){
            return{
                todos:JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods:{
          //添加todo
          addTodo(todoObj){
            console.log("addTodo执行了")
            this.todos.unshift(todoObj)
          },
          checkTodo(id){
            this.todos.forEach((todo)=>{
              if(todo.id === id) todo.done=!todo.done
            })
          },
          deleteTodo(_,id){
            this.todos=this.todos.filter(todo => todo.id!==id)
          },
          //全选或取消全选
          checkAllTodo(done){
            this.todos.forEach((todo)=>{
              todo.done=done;
            })
          },
          clearDoneTodo(){
            this.todos=this.todos.filter((todo)=>{
                return !todo.done
            })
          }
        },
        watch:{
            todos:{
              deep:true,
              handler(value){
                localStorage.setItem("todos",JSON.stringify(value))
              }
          }
        },mounted(){
          this.$bus.$on('checkTodo',this.checkTodo);
          // this.$bus.$on('deleteTodo',this.deleteTodo);
          this.pubId=pubsub.subscribe("deleteTodo",this.deleteTodo)
        },
        destroyed(){
          this.$bus.$off("checkTodo")
          // this.$bus.$off("deleteTodo")
          pubsub.unsubscribe(this.pubId)

        }
    }
</script>
<style  lang="less">
 
 body{
  background: #ffff;
 }

 btn {
display: inline-block;
padding:4px 12px;
margin-bottom:0;
font-size:14px;
line-height:20px;
text-align: center;
vertical-align:middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255,255,0.2), 0 1px 2p  rgba(0,-0, 0,0.05);
border-radius:4px;
}

.btn-danger {color:#fff;background-color:#da4f49;border: 1px solid #bd362f;}
.btn-danger :hover {color:#fff;background-color:#bd362f;}
.btn:focus {
outline: none;
}
todo-container {width: 600px;
  margin:  auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>